<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 
        基本包装类型
          - 为了方便操作简单数据类型，JavaScript还提供了三个特殊的简单类型：String/Number/Boolean
          - 实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而让我们能够调用一些方法来操作这些数据
          - 案例:
            比如我们要使用str的slice方法,其实str是一个基本类型,上边是没有slice方法的
            当调用str的slice方法的时候,先创建了一个str的包装对象,所有的方法都在str的包装对象上
            伪代码:let result = str.slice()执行过程
              let str = "abc"
              let Str = String(str)//得到包装对象
              result = Str.slice()
            
          - 案例:
            我们给基本数据类型扩展属性和方法都是无效的,主要原因也是因为他的包装对象
            当我们给str.abc = "1",获取str的abc属性是undefined
            伪代码如下:
              let Str = String(str);//因为要对基本包装类型操作,先得到他的包装对象
              Str.abc = "1";//给包装对象设置一个abc属性
              Str = null;//把包装对象删掉
          */

      /* 
        字符串的方法:(字符串所有的方法都不会改变原字符串，而是返回一个新字符串)
          - toUpperCase():把所有的字母转大写
          - slice():截取字符串,第一个参数是开始的下标,第二个参数是结束的下标
          - split():字符串转数组

        数组的方法：
          - map：映射数组，一定会返回一个和原数组一样长度的数组,每一个值都是回调函数的返回值
          - join:数组转字符串
      */
      // 让一个字符串的首字母大写,比如 "hello every one"--->"Hello every one"
      let str = "hello every one";
      const result = str[0].toUpperCase() + str.slice(1);
      console.log(result);

      //让一个字符串所有单词的首字母大写,比如"hello every one"--->"Hello Every One"
      let str2 = "hello every one";
      let resultStr = "";
      const str2Arr = str2.split(/\s+/g);
      const str2ResultArr = str2Arr.map((item) => {
        return item[0].toUpperCase() + item.slice(1);
      });
      console.log(str2ResultArr.join(" "));
    </script>
  </body>
</html>
